<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
 
<logic:empty name="usuario">
	<logic:forward name="login" />
</logic:empty>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<link rel="stylesheet" type="text/css" href="/js/datepick/flora.datepick.css">

		<link href="/js/uploader/fileuploader.css" rel="stylesheet" type="text/css" />
		<script src="/js/uploader/fileuploader.js" type="text/javascript"></script>

		<script type="text/javascript" src="/js/datepick/jquery.datepick.js"></script>
		<script type="text/javascript" src="/js/datepick/jquery.datepick-es.js"></script>
				    			        
		<script>
		
			var nombre_fichero = "";
		
			$(function(){
				
				$(".checkboxLista li").click(function (){					
			  		if($(this).hasClass('uncheck')){
			  			$('.checkboxLista li').removeClass('check').addClass('uncheck');
			    		$(this).removeClass('uncheck');
			    		$(this).addClass('check');
			  		}else{
			  			$('.checkboxLista li').removeClass('check').addClass('uncheck');
			    		$(this).removeClass('check');
			    		$(this).addClass('uncheck');
			  		}

				$('#periodo').css("text-align","center");
				$('#periodo').datepick($.extend({
					useThemeRoller: false, 
					rangeSelect: true, 
					numberOfMonths: 2}, $.datepick.regional['es']));		
				});
				
				var uploader = new qq.FileUploader({
		            element: document.getElementById('file-uploader'),
		            action: '/ExplotacionAction.do?metodo=SubirFicheroExcel',
		            onComplete: function(id, fileName, responseJSON){
		            	if(responseJSON.success == true) {		            		
		            		$("#file-uploader").hide();
		            		$("#nombre_fichero").show();
		            		$("#nombre").html(fileName);
		            		$("#enviar").show();
		            		nombre_fichero = fileName;
		            	} else
		            		$("#enviar").hide();
		            }
		        });           
			});
			
			function enviarSolicitud() {
				var tmp = $('.checkboxLista li').get();
				var id_tarificador = "";
				for(var x = 0; x < tmp.length; x++) {
					if(tmp[x].className == "check")
							id_tarificador = tmp[x].value;					
				}

				if(id_tarificador.length == 0) {
					alert("NO ha seleccionado ningún PARQUE.");
				} else {	
					var periodo = document.getElementById("periodo").value;

					var origen = document.getElementById("origen").value;
					var tm = $('input[name=tm]:checked').val();
					var numero_linea = document.getElementById("linea").value;
					
					var url = "/ExplotacionAction.do?metodo=ImportarExcel&id_tarificador=" + id_tarificador + "&periodo=" + periodo + "&origen=" + origen + "&tm=" + tm + "&numero_linea=" + numero_linea + "&nombre_fichero=" + nombre_fichero;
					//alert(url);

					$("#enviar").hide();
					
				   	$.ajax({
				    	url: url, 
				    	type: 'POST',
				    	cache: false,
				    	async: false,
				    	timeout: 30000,
				    	selectFirst: false,
				    	success: function (responseText, textStatus , XMLHttpRequest) {
									if(textStatus == "success" && responseText == "success")
										alert("Los Datos se han Grabado Correctamente");
									else
										alert("Los Datos NO se han Grabado Correctamente");
									$("#enviar").show();
				   		},		       	
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							alert("Error al conectar con el sistema. Reinténtelo de nuevo");
							$("#enviar").show();
						}							   		
				   	});				   					   	
				}					
			}		
		</script>
				
	</head>
	<body>
		<div class="blocks">
  			<div class="block" style="width: 500px; float: left;">
  				<h3 class="title"><span>Seleccione la Instalación a Importar Medidas</span></h3>
  				<div class="block-div"></div><div class="block-div-arrow"></div>   
				<ul class="checkboxLista" style="height: 360px; overflow: auto;">						
					<logic:iterate id="parque" name="parques_autorizados">
						<logic:equal value="S" name="parque" property="propio">
							<logic:iterate id="tarificador" name="parque" property="tarificadores">
								<logic:notEqual value="2" name="tarificador" property="orden">
									<li class="uncheck" value="<bean:write name='tarificador' property='id_tarificador' format='#' />">
										<bean:write name="parque" property="nombre" />
											<logic:notEqual value="1" name="tarificador" property="orden">
												(<bean:write name="tarificador" property="nombre" />)
											</logic:notEqual>
									</li>
								</logic:notEqual>
							</logic:iterate>		
						</logic:equal>
					</logic:iterate>				              			                      	                     		                     
            	</ul>                  	  	
          	</div> 
           	<div class="block" style="width: 420px; float: left; margin-left: 20px;">
  				<h3 class="title"><span>Seleccione Opciones de la Importación</span></h3>
  				<div class="block-div"></div><div class="block-div-arrow"></div>
  				<div id="opciones" style="text-align: left;">
  					<label>Fichero Excel : </label><div id="nombre_fichero" style="font-weight: bold; text-transform: uppercase; display: none;">El fichero '<span id="nombre"></span>' se ha subido correctamente</div>
					<div id="file-uploader"></div>
 				</div>
				<br>  				
				<label>Origen de los Datos : </label>
				<div style="padding-left: 20px;">  						  						
					<input type="radio" id="origen" name="origen" checked="checked" value="1" /><span class="options" style="vertical-align: top;">&nbsp;Contador Principal</span><br>
					<input type="radio" id="origen" name="origen" value="2" disabled="disabled"/><span class="options" style="vertical-align: top;">&nbsp;Contador Secundario</span><br>
				</div>
				<br>
				<label>Tipo Medida : </label>
				<div style="padding-left: 20px;">						
					<input type="radio" id="tm1" name="tm" checked="checked" value="1"/><span class="options" style="vertical-align: top;">&nbsp;Curva Horaria</span><br>
					<input type="radio" id="tm2" name="tm" value="2"/><span class="options" style="vertical-align: top;">&nbsp;Curva CuartoHoraria</span><br>
				</div>
				<br>
				<label>1ª fila con datos : </label>
				<div style="padding-left: 20px;">
					<input type="text" name="linea" id="linea" style="width: 20px; text-align: center;" maxlength="2" value="2"/>
				</div>
				<br>					
				<label>Período de medidas a cargar : </label>
				<div style="padding-left: 20px;">
					<input type="text" name="periodo" id="periodo" style="width: 180px;"/>	  						
				</div>
				<br>					
				<input id="enviar" type="button" value="Solicitar" onclick="enviarSolicitud();" style="display: none;"/>
   			</div>
   			
           	<div class="block" style="width: 230px; float: left; margin-left: 20px;">
  				<h3 class="title"><span>Notas Importantes</span></h3>
  				<div class="block-div"></div><div class="block-div-arrow"></div>
  				<div id="opciones" style="text-align: left;">   	
  					<ul>
  						<li>Se <b>BORRARAN</b> de la Base de Datos las medidas que existen para el período indicado, desde la hora 1 del primer día hasta la 24 del último.<br><b>¡OJO!</b> CUIDADO al indicar TM1 o TM2. Se perderán los datos si te equivocas.<br><br></li>  						
  						<li>La 1ª fila con datos se cuenta desde que empiezan las medidas. <br>Ej. si existe cabecera la 1ª fila con datos será la 2, sino hay cabecera será la 1.</li>
  					</ul>	
  				</div>
  			</div>	
		</div>
	</body>
</html>